<template>
    <section class="chart-wrap flex1" ref='chart-wrap'>
        <!-- 控制按钮 -->
        <Control :togglePanKou="()=>panKouShow=!panKouShow" :chartType="chartType" :curResoluTion="curResoluTion"
            :subTime="subTime" :toggleSubTime="() => subTime=!subTime" :panKouShow="panKouShow" :studyShow="studyShow"
            :setChartStudy="setChartStudy" :setChartResolution="setChartResolution"/>
        <!-- 盘口容器 -->
        <Handicap v-if="panKouShow" :curQuota="curQuota" />
        <!-- 图表容器 -->
        <div class="flex1" ref='_container' v-show="!panKouShow" id="tv_chart_container" />
    </section>
</template>
<script>
	import "@views/chart/charting_library/jquery-1.11.2.min.js"
    import "@views/chart/charting_library/charting_library.min.js"
    
	import Handicap from "@views/chart/subPage/handicap.vue"
	import Control from "@views/chart/subPage/control.vue"
	import Datafeeds from "@views/chart/charting_library/datafeed.js"
	import { line, volume } from "@views/chart/charting_library/config.js"
	import { mapState, mapGetters, mapMutations } from "vuex"

	export default {
		data() {
			return {
				panKouShow: false,
				studyShow: false,
				subTime: false,
				widget: null,
				curResoluTion: "1",
				chartType: 3,
				showTeach: false
			};
		},
		components: {
			Handicap,
			Control
		},
		mounted() {
			//创建图表
			this.createChart();
            // 渠道信息
		},
		beforeDestroy() {
			window.UDFTimer && clearTimeout(window.UDFTimer);
		},
		computed: {
			...mapState([
				"allTypeVariety",
				"gold",
				"navBarShow",
				"curVariety",
				"userInfo",
				"curQuota",
				"tradeTime",
				"channelInfo",
				"toOrder",
				"topupAuth",
			]),
			//当前窗口高度
		},
		methods: {
			...mapMutations([
				"setGold",
				"showNavBar",
				"setNavBarShow",
				"setTradeTime",
				"setCurQuota",
			]),
			backToTrade() {
				this.showTeach = false;
			},
			createChart() {
				try {
					var widget = new TradingView.widget({
						datafeed: new Datafeeds.UDFCompatibleDatafeed(
							"/quota/quota/getQuotaByRange.do",1600),
						// library_path: "./charting_library",
						width: this.$refs._container.scrollWidth,
						height: this.$refs['chart-wrap'].scrollHeight - 35,
						interval: 1,
						timezone: "Asia/Hong_Kong",
						container_id: "tv_chart_container",
						custom_css_url: "../../charting_library/chart.css",
						loading_screen: { backgroundColor: "#fff" },
						locale: "zh",
						disabled_features: [
							"use_localstorage_for_settings",
							"header_saveload",
							"header_screenshot",
							"header_settings",
							"header_compare",
							"header_undo_yellowo",
							"timeframes_toolbar",
							"timeframes_toolbar",
							"remove_library_container_border",
							"border_around_the_chart",
							"display_market_status",
							"show_logo_on_all_charts",
							"show_chart_property_page",
							"panel_context_menu",
							"widget_logo",
							"left_toolbar",
							"header_widget",
							"timeframes_toolbar",
							"edit_buttons_in_legend",
							"context_menus",
							"control_bar",
							"volume_force_overlay"
						],
						enabled_features: [
							"study_templates",
							"keep_left_toolbar_visible_on_small_screens",
							"side_toolbar_in_fullscreen_mode",
							"property_pages"
						],
						charts_storage_url: "http://saveload.tradingview.com",
						charts_storage_api_version: "1.1",
						user_id: "",
						theme: "light",
						overrides: line,
						preset: "mobile",
						studies_overrides: volume
					});
					widget.MAStudies = [];
					widget.selectedIntervalButton = null;
					this.widget = widget;
				} catch (error) {
				}
			},
			setChartResolution(e, type) {
				if (!e) return
				this.curResoluTion = e
				this.chartType = type ? type : 1
				this.widget.chart().setResolution(e)
				this.widget.chart().setChartType(this.chartType)
				this.panKouShow = false
				this.subTime = false
			},
			setChartStudy() {
				if (this.widget.MAStudies.length > 0) {
					this.widget.MAStudies.forEach((value, idx, arr) => {
						this.widget.chart().removeEntity(this.widget.MAStudies[idx]);
					});
					this.widget.MAStudies = [];
                    this.$set(this.widget, "MAStudies", []);
                    this.studyShow = false;
				} else {
                    const lines = [5,10,20,40]
                    const colors = ['#5E5807','#7D2F9A','#216874','#5E5807']
                    lines.map((item,i) => {
                        this.widget.chart().createStudy(
                            "Moving Average",
                            !0,
                            !1,
                            [lines[i], "close", 0],
                            id => {
                                this.$set(this.widget.MAStudies, this.widget.MAStudies.length, id);
                            },
                            { "plot.color": colors[i],"plot.linewidth": 3,}
                        );
                    })
                    this.studyShow = true;
                }
				this.panKouShow = false;
			},
			jumpPage(page) {
				this.$nextTick(() => {
					this.$router.push({
						path: page
					});
				});
			},
			getTopupAuth() {
				if (this.topupAuth == {}) {
					this.$router.push({
						path: "/login",
					});
				} else if (this.topupAuth.identify === 1 && !this.topupAuth.cardState) {
					MessageBox.confirm("", {
						title: "充值",
						message: "为了您的资金安全，请前去绑卡",
						confirmButtonText: "去绑定",
						confirmButtonClass: "red"
					}).then(() => {
						this.$router.push({
							path: "/account/bindbank",
						});
					});
				} else {
					window.location.href = "./account/paySelect.html";
				}
			}
		},
		watch: {
			toOrder(newer, older) {
				if (newer) {
					this.jumpPage("/order");
				}
			},
			curVariety (newer,older) {
				console.log('图表更改品种')
				this.widget.chart().setSymbol(this.curVariety.contractsCode);
			}
		}
	};
</script>
<style scoped>
    #tv_chart_container{
        position: relative;
    }
	li.select span {
		background-color: #939dc0;
    }
</style>